<template>
  <content-body title="用户管理">
    <create-account
      slot="btns"
      :fn-add="fnCreateAccount"
      @onAccountCreate="handleCreated"
    />
    <el-table
      :data="users"
    >
      <el-table-column
        fixed
        label="账号"
        width="180"
      >
        <template slot-scope="scope">
          <el-avatar :size="18">
            <img :src="scope.row.avatarUrl">
          </el-avatar>
          <span style="margin-left: 10px">{{ scope.row.loginId }}{{ scope.row.password ? `(${scope.row.password})` : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="180"
      />
      <el-table-column
        label="角色"
      >
        <template slot-scope="scope">
          <set-roles
            :scope="scope"
            :role-map="roleMap"
            :role-list="roles"
            :fn-edit="fnSetRoles"
            @setRoles="setRoles"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="180"
      >
        <template slot-scope="scope">
          <set-status
            :scope="scope"
            :fn-edit="fnSetStatus"
            @statusChanged="statusChanged"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <reset-password :fn-edit="fnResetPassword" :info="scope.row" @onPasswordReset="handlePwdReset" />
        </template>
      </el-table-column>
    </el-table>
  </content-body>
</template>

<script>
// import AuthImage from '@/views/components/AuthImage'
import { createImageUrl } from '@/svc/image/image'
import ResetPassword from './components/ResetPassword'
import CreateAccount from './components/CreateAccount'
import SetStatus from './components/SetStatus'
import SetRoles from './components/SetRoles'
import {
  listAccountsAndRoles,
  setStatus,
  setRoles,
  resetPassword,
  createAccount
} from '@/svc/account'
// import { testAdd, resetRouter } from '@/router/index'
// import Layout from '@/layout'
// import router, { resetRouter } from '@/router'
export const PageInfo = {
  title: '账号管理',
  icon: 'peoples',
  props: {
    admin: true // admin 账号必有功能
  },
  apis: [
    ...listAccountsAndRoles.apis,
    ...setStatus.apis,
    ...setRoles.apis,
    ...resetPassword.apis,
    ...createAccount.apis
  ]
}

export default {
  name: 'Users',
  components: { ResetPassword, CreateAccount, SetStatus, SetRoles },
  data() {
    return {
      fnSetStatus: setStatus.fn,
      fnSetRoles: setRoles.fn,
      fnResetPassword: resetPassword.fn,
      fnCreateAccount: createAccount.fn,
      users: [],
      roles: [],
      roleMap: {}
    }
  },
  mounted() {
    listAccountsAndRoles.fn(this).then(res => {
      if (!this.$rjok(res)) {
        return
      }
      // if (res['error']) {
      //   this.$error(res['error'])
      //   return
      // }
      const acts = res[listAccountsAndRoles.ACCOUNT_LIST]
      if (!this.$rjok(acts)) {
        return
      }
      console.log(acts)
      // if (acts['error']) {
      //   this.$error(acts['error'])
      //   return
      // }
      this.users = acts['data']
      this.users.forEach(a => {
        a['avatarUrl'] = createImageUrl({
          service: 'self.Avatar',
          args: { avatar: a.avatar }
        })
      })

      const roles = res[listAccountsAndRoles.ROLE_LIST]
      // if (roles['error']) {
      //   this.$error(roles['error'])
      //   return
      // }
      if (!this.$rjok(roles)) {
        return
      }
      this.roles = roles['data']
      this.roleMap = {}
      this.roles.forEach((item, n) => {
        this.roleMap[item['id']] = item['name']
      })
    })
  },
  methods: {
    handleCreated(info) {
      this.users.push(info)
      // this.users.splice(0, 0, info)
    },
    statusChanged(id, index, newStatus) {
      this.users.forEach(user => {
        if (user.id === id) {
          user.status = newStatus
          return
        }
      })
      // this.users[index].status = newStatus
    },
    handlePwdReset({ id, password }) {
      const users = []
      this.users.forEach(user => {
        if (user.id === id) {
          user.password = password
        }
        users.push(user)
      })
      this.users = users
    },
    setRoles(id, index, roles) {
      // this.users[index].roles = roles
      this.users.forEach(user => {
        if (user.id === id) {
          user.roles = roles
          return
        }
      })
    }
  }
}
</script>

<style lang="less">
</style>
